const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode:'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'index.html',
      minify:{
        removeAttributeQuotes:true,
        collapseWhitespace:true
      },
      hash:true
    })
  ],
  module:{
    rules:[   //匹配规则
      //css-loader 解析import语法
      //style-loader 把css插入到header标签
      //scss-loader 把scss解析成css
      //安装scss-loader以外还需要安装node-sass
      //loader执行顺序是从右向左
      // 可以为css-loader设置参数
      {test:/\.css$/,use:[{loader:'style-loader'},'css-loader']},
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
  }
}
